<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            margin-top: 20px;
            border-spacing: 0;
        }
        th,td{
            border: 2px solid blue;
            width: 150px;
            height: 50px;
        }
        .a2{
            position: absolute;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son">
            <h2>KKY点餐系统</h2>
            菜名: <input type="text" class="cm"><br>
            价格: <input type="text" class="jg"><br>
            份数: <input type="text" class="fs"><br>
            验证码: <input type="text" class="cm"><span style="background-color: blue;"></span><button onclick="sx()" class="a2">刷新验证码</button><br>
            <button onclick="add()">添加</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>全选/全不选 <input type="checkbox" onclick="qx1()" ></th>
                    <th>序号</th>
                    <th>添加时间</th>
                    <th>菜名</th>
                    <th>价格</th>
                    <th>份数</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th style="color: red;">选中删除</th>
                    <th colspan="4">全部总计:</th>
                    <th colspan="3" class="zj"></th>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>
<script>
    var cm=document.querySelector('.cm')
    var jg=document.querySelector('.jg')
    var fs=document.querySelector('.fs')
    var yzm=document.querySelector('.yzm')
    var tbody=document.querySelector('tbody')
    var qx=document.querySelector('thead input')
    var span=document.querySelector('span')
    var zj=document.querySelector('.zj')
    var a=1;
    //存数据
    function set(data){
        localStorage.setItem('data',JSON.stringify(data))
    }
    //取数据
    function get(){
        var data= localStorage.getItem('data')
        if(data!=null){
            return JSON.parse(data)
        }else{
            return []
        }
    }
    //将取得的数据存储到本地
    function add(){
        if(cm.value.trim()==''&&jg.value.trim()==''&&fs.value.trim()==''){
            alert('内容不能为空')
        // }else if(yzm.value!=span.innerHTML){
        //     alert('验证码错误')
        }else{
            //先获取数据
            var shuju=get();
            //添加
            shuju.push({
                time:getTime(),
                uname:cm.value,
                price:jg.value,
                num:fs.value,
            })
            //将数据存储到本地
            set(shuju)
            cm.value=''
            jg.value=''
            fs.value=''
            //渲染
            xr();
        }
    }
    function getTime(){
        var date=new Date();
        var year=date.getFullYear();
        var mouth=date.getMonth()+1;
        var day=date.getDate();
        var h=date.getHours();
        var min=date.getMinutes();
        var s=date.getSeconds();
        return `${year}.0${mouth}.0${day} ${h}:${min}:${s}`;
    }
    
    function xr(){
        tbody.innerHTML=''
        //获取数据
        var shuju=get();
        var sum=0;
        //循环遍历
        for(i=0;i<shuju.length;i++){
            //创建
            var tr=document.createElement('tr')
            //赋值
            tr.innerHTML=`
                    <td><input type="checkbox"  onclick="fx()"></td>
                    <td>${a++}</td>
                    <td>${shuju[i].time}</td>
                    <td>${shuju[i].uname}</td>
                    <td>${(shuju[i].price/1).toFixed(2)}</td>
                    <td>${shuju[i].num}</td>
                    <td>${(shuju[i].price*shuju[i].num).toFixed(2)}</td>
                    <td><button onclick="del(${i})">删除</button></td>`;
            //添加
            tbody.appendChild(tr)
            sum+=shuju[i].price*shuju[i].num        
        }
        zj.innerHTML=sum.toFixed(2)+'元';
    }
    //全局调用
    xr()
    function relax(){
        var arr = [];
        for (i = 0; i < 4; i++) {
            var sjs = Math.floor(Math.random() * (max - min + 1)) + min;
            if (i == 3) {
                sjs = String.fromCharCode(65 + sjs);
            }
            if (i == 2) {
                sjs = String.fromCharCode(sjs + 97);
            }
            arr.push(sjs)
        }
        var stt = arr.join("");
        return stt;
    }
    function sx(){
        span.innerHTML=relax();
    }
    
    span.innerHTML='';
    
    function del(aaa){
        //获取数据
        var shuju=get()
        //操作数据(删除)
        shuju.splice(aaa,1)
        //存储
        set(shuju)
        //渲染
        xr()
    }
    function qx1(){
        var fxk=document.querySelectorAll('tbody input')
        for(i=0;i<fxk.length;i++){
            fxk[i].checked=qx.checked
        }
    }
    
    function fx(){
        var fxk=document.querySelectorAll('tbody input')
        var fxks=document.querySelectorAll('tbody input:checked')
        if(fxk.length==fxks.length){
            qx.checked=true
        }else{
            qx.checked=false
        }
    }
</script>